<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../../static/javascripts/jQuery.js"></script>
    <style>
         * {
                  margin: 0;
                  padding: 0;
            }

            li {
                  list-style-type: none;
            }

            .container {
                  width: 500px;
                  margin-left: 80px;
                  position: relative;
                  margin-top: 50px;
            }

            .small-img {
                  width: 500px;
                  height: 450px;
            }

            .small-img img {
                  width: 100%;
                  height: 100%;
            }

            .focus {
                  width: 300px;
                  height: 300px;
                  background: #FEDE4F;
                  opacity: 0.5;
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: none;
            }

            .big-img {
                  position: absolute;
                  left: 450px;
                  top: 0;
                  width: 500px;
                  height: 500px;
                  overflow: hidden;
                  display: none;
            }

            .big-img img {
                  position: absolute;
                  left: 0;
                  top: 100px;
                  width: 750px;
                  height: 750px;
            }

            .img-list {
                  width: 90px;
                  position: absolute;
                  bottom: 50px;
                  right: 100px;
                  max-height: 280px;
                  /* overflow: hidden; */
            }
            .img-list li{
                  border: 1px solid #C69C6D;
                  height: 48px;
                  width: 88px;
                  margin-top: 20px;
            }
            .img-list li img{
                  width: 88px;
                  height: 48px;
            }
            .list h1{
                  font-size: 20px;
                  line-height: 28px;
                  padding-top: 20px;
                  color: #684029;
            }
            .list h6{
                  display: inline-block;
                  line-height: 18px;
                  color: #D5BFA7;
                  padding: 0 10px;
                  border: 1px solid #D5BFA7;
                  border-radius: 100px;
                  margin-right: 6px;
                  font-size: 12px;
            }
            .list h5{
                  font-size: 12px;
                  width: 484px;
                  line-height: 2em;
                  min-height: 30px;
                  
            }
            .list p{
                  width: 167px;
                  height: 30px;
                  line-height: 30px;
                  background: #482618;
                  color: white;
                  text-align: center;
            }
        
    </style>
</head>

<body>
    <div class="header">
        <div class="header-logo">
            <img src="https://oss.51cocoa.com/themes/site/img/logo.png" alt="">
        </div>
        <ul class="nav-box">
            <a href="index.html">首页</a>
            <a href="cake.html">蛋糕</a>
            <a href="cake.html">面包</a>
            <a href="cake.html">冰淇淋</a>
            <a href="cake.html">冻与焗/轻蛋糕</a>
            <a href="cake.html">2小时急达送</a>
        </ul>
        <div class="right-user">
            <a class="username"></a>
            <a href="loginin.html">登录</a>
            <a href="register.html">注册</a>
            <a href="cart.html">购物车</a>
        </div>
    </div>
    
    <div class="container">
        <!-- 小图  -->

        <div class="small-img">
            <!-- 焦点 -->
            <div class="focus"></div>
            <img src="https://oss.51cocoa.com//upload/images/d114513e1f54fef0bb599c1d443772d0.jpg" alt="">
        </div>

        <!-- 大图 -->
        <div class="big-img">
            <img src="https://oss.51cocoa.com//upload/images/d114513e1f54fef0bb599c1d443772d0.jpg" alt="">
        </div>
        <!-- 图片列表 -->
       
    </div>
    <ul class="img-list">
        <li><img src="https://oss.51cocoa.com//upload/images/d114513e1f54fef0bb599c1d443772d0.jpg" alt=""></li>
        <li><img src="https://oss.51cocoa.com//upload/images/e853511a636a6a7c4974866841dde1f4.jpg" alt=""></li>
        <li><img src="https://oss.51cocoa.com//upload/images/b11015c59cb603be887b7e9bb31c573d.jpg" alt=""></li>
        <li><img src="https://oss.51cocoa.com//upload/images/431464a0ab478bc5f6427d7eeef774ff.jpg" alt=""></li>
  </ul>
    <script>
        class Fangdajing {
            constructor() {
                this.container_ele = document.querySelector(".container")
                this.small_img_ele = document.querySelector(".small-img")
                this.big_img_ele = document.querySelector(".big-img")
                this.focus_ele = document.querySelector(".focus")
                this.big_pic = document.querySelector(".big-img img")
                this.small_pic = document.querySelector(".small-img img")
                this.img_list1 = document.querySelectorAll(".img-list li")
                console.log(this.img_list);
                this.container_left = {
                    left: this.container_ele.offsetLeft
                }
                this.focus_size = {
                    width: parseInt(getComputedStyle(this.focus_ele).width),
                    height: parseInt(getComputedStyle(this.focus_ele).height)
                }
                this.img_list = [
                    {
                        small: "https://oss.51cocoa.com//upload/images/d114513e1f54fef0bb599c1d443772d0.jpg",
                        big: "https://oss.51cocoa.com//upload/images/d114513e1f54fef0bb599c1d443772d0.jpg"
                    },
                    {
                        small: "https://oss.51cocoa.com//upload/images/e853511a636a6a7c4974866841dde1f4.jpg",
                        big: "https://oss.51cocoa.com//upload/images/e853511a636a6a7c4974866841dde1f4.jpg"
                    },
                    {
                        small: "https://oss.51cocoa.com//upload/images/b11015c59cb603be887b7e9bb31c573d.jpg",
                        big: "https://oss.51cocoa.com//upload/images/b11015c59cb603be887b7e9bb31c573d.jpg"
                    },
                    {
                        small: "https://oss.51cocoa.com//upload/images/431464a0ab478bc5f6427d7eeef774ff.jpg",
                        big: "https://oss.51cocoa.com//upload/images/431464a0ab478bc5f6427d7eeef774ff.jpg"
                    }
                ]
                console.log(this.big_pic);
            }
            bindEvent() {
                var mag = this
                for (let i = 0; i < this.img_list1.length; i++) {
                    console.log(mag.img_list1[i], i, this.img_list.length);
                    mag.img_list1[i].addEventListener("click", function () {
                        console.log(i);
                        mag.cut(i)
                    })
                }
                this.small_img_ele.addEventListener("mouseover", function () {
                    mag.toggle("block")
                })
                this.small_img_ele.addEventListener("mouseout", function () {
                    mag.toggle("none")
                })
                this.small_img_ele.addEventListener("mousemove", function (e = event) {
                    var client_x = e.clientX
                    var client_y = e.clientY
                    mag.focusMove(client_x, client_y)
                })
            }
            cut(x) {
                // this.big_pic.src=this.img_list[x].big
                this.big_pic.setAttribute("src", this.img_list[x].big)
                this.small_pic.src = this.img_list[x].small
            }
            focusMove(x, y) {
                if (x < 230) {
                    x = 230
                }
                if (x > 380) {
                    x = 380
                }
                if (y < 150) {
                    y = 150
                }
                if (y > 300) {
                    y = 300
                }
                this.focus_ele.style.left = x - this.container_left.left - this.focus_size.width / 2 + "px"
                this.focus_ele.style.top = y - this.focus_size.height / 2 + "px"
                this.big_pic.style.top = -(y - this.focus_size.height / 2) / 3 * 5 + "px"
                this.big_pic.style.left = -(x - this.container_left.left - this.focus_size.width / 2) / 3 * 5 + "px"
            }
            toggle(type) {
                switch (type) {
                    case "block":
                        this.focus_ele.style.display = "block";
                        this.big_img_ele.style.display = "block"
                        break;
                    case "none":
                        this.focus_ele.style.display = "none"
                        this.big_img_ele.style.display = "none"
                }
            }
        }
        var m = new Fangdajing
        m.bindEvent()
      //   渲染页面
      
      var btn = document.getElementById("btn")
      window.onload=function(){
            $(function () {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8888/public/list1.json",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    render(data)
                }
            })

        })
        let container = $(".container")
        function render(res) {
            console.log(res);
            // res = JSON.parse(res);
            container.append(res.list.map(item => 
                `<div class="list">
                  <h1>${item.name}</h1>
                  <h6>${item.label1}</h6>
                    <h6>${item.label2}</h6>
                    <h5>${item.introduce}</h5>
                   
                    <img src=${item.img} alt="">
                    <img src=${item.img1} alt="">
                    <img src=${item.img2} alt="">
                  </div>`).join("")
            )
        }

      }
      
           
     
    </script>
</body>

</html>